<template>
  <!-- 最大父容器 -->
  <div class="all-products-container">
    <div class="all-products-inner">

      <div class="brand-display-box">
        <div class="brand-list">
          <div class="brand-item" v-for="brand in brandList" :key="brand.id" @click="handleBrandClick(brand.id)">
            {{ brand.name }}
          </div>
        </div>
      </div>

      <div class="products-gird"  >
        <ProductCard
          v-for="(product, index) in filteredProducts"
          :key="product.id || index"
          :product="product"
        />
        <div v-if="filteredProducts.length === 0" class="empty-state">
          currently no such brand available
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue';
import ProductCard from '../product-card/ProductCard.vue';
import emitter from '@/utils/emitter';
import { getAllBrands } from "@/api/brand.js"
import { getAllProducts } from '@/api/product'

// 全部产品数据
const allProducts = ref([])

const brandList = ref([])// 品牌列表变量

const currentCategoryId = ref(0)// 初始分类ID（0显示全部）
const currentBrandId = ref(0)

//计算根据分类过滤产品
const filteredProducts = computed(() => {
  let res = allProducts.value.filter(prd => {
    if (currentCategoryId.value && currentBrandId.value) {
      return ( prd.categoryIds === currentCategoryId.value && ( prd.brandId === currentBrandId.value ) )
    }
    if (currentCategoryId.value) {
      return prd.categoryIds === currentCategoryId.value
    }
    if (currentBrandId.value) {
      return prd.brandId === currentBrandId.value
    }
    return true
  })
  console.log(res.length)
  return res
});

// 定义事件处理函数
const handleFilterCategory = (categoryId) => {
  currentCategoryId.value = categoryId
  console.log('分类ID', currentCategoryId.value)
}
// 点击品牌时触发事件
const handleBrandClick = (brandId) => {
  currentBrandId.value = brandId
  console.log('品牌ID', currentBrandId.value)
}

const ShowAll = () => {
  currentCategoryId.value = 0
  currentBrandId.value = 0
}

onMounted(() => {
  emitter.on('filter-category', handleFilterCategory)
  emitter.on('show-all-products', ShowAll)

  getAllBrands().then( res => {
    brandList.value = res.data;
  })

  getAllProducts().then(res => {
    res.data.forEach(item => {
      item.imageUrl = import.meta.env.VITE_APP_BASE_FILE + (item.mainImage || '')
    })
    allProducts.value = res.data
  })
})

onUnmounted(() => {
  emitter.off('filter-category')
  emitter.off('show-all-products')
})
</script>

<style scoped>
.all-products-container {
  width: 100%;
  height: auto; /* 高随内容变化 */
  background-color: #fff;
  padding: 7.5vh 0;
  box-sizing: border-box;
}

.all-products-inner{
  width: 64%;
  max-width: 1920px;/* 超大屏最大宽度限制*/
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.brand-display-box {
  margin: 0 0 30px 0;
  padding: 0;
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.brand-item {
  width: calc((100% - 60px) / 4);
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.products-gird{
  display: grid !important;
  grid-template-columns: repeat(4,1fr);/* 一行3列，每列等宽（1fr），列间距20px */
  gap: 20px;
  align-items: start;
}

.products-gird :deep(.product-card) {
  width: 100%;  /* 强制卡片占满，避免缩放时卡片尺寸异常 */
  height: 100%;
}

.loading-state, .error-state, .empty-state {
  text-align: center;
  padding: 80px 0;  /* 上下内边距，避免内容贴边 */
  font-size: 16px;
  color: #333;
}

.empty-state {
  height: 200px;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 0;
  font-size: 22px;
  font-weight: 600;
  color: #999;
}
</style>
